<script lang='ts' setup name='DrugList'>
import { ref } from 'vue'

import  DrugEdit  from "./edit.vue";

import useList from "@/hook/useList";
import type { Drug } from '@/api/types';


 //定义的 查询列表的接口
 const listUrl = '/drug/list'
  //删除的URL
  const removeUrl = '/drug/removeById/'

const {tableData ,show,editId,handleEdit,handleDelete,load,add,clostDialog} = useList<Drug>(listUrl,removeUrl)



</script>

<template>
  <el-button @click="add">添加</el-button>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="id"  prop="id"> </el-table-column>
    <el-table-column label="name"  prop="name"> </el-table-column>
    <el-table-column label="price" prop="price"> </el-table-column>
  
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>


  <el-dialog  v-if="show" v-model="show" title="编辑"  width="500" >
       <DrugEdit v-if="show" :clostDialog="clostDialog" :id="editId"> </DrugEdit>
  </el-dialog>


</template>

<style scoped></style>